<template>
  <div class="workflow-form">
    <a-form
      :model="form"
      name="form"
      label-wrap
      :label-col="{ span: 24 }"
      :wrapper-col="{ span: 24 }"
      autocomplete="off"
    >
      <a-form-item label="名称" name="name">
        <a-input v-model:value="form.name" :maxlength="20" placeholder="名称"></a-input>
      </a-form-item>
      <!-- <a-form-item v-if="form.conditionExpression" label="流条件" name="conditionExpression">
        <a-input
          v-model:value="form.conditionExpression.conditionValue"
          :disabled="(form.conditionExpression?.conditionValue ?? '').includes('${nodeId ==')"
          placeholder="例：${num>1 && num<=3}"
        ></a-input>
      </a-form-item> -->

      <a-form-item
        v-if="!(form.conditionExpression?.conditionValue ?? '').includes('${nodeId ==')"
        label="业务字段"
        name="feild"
      >
        <a-select v-model:value="form.feild" :options="feildList" placeholder="请选择" @change="onChange"> </a-select>
      </a-form-item>
      <a-form-item
        v-if="form.conditionExpression && !(form.conditionExpression?.conditionValue ?? '').includes('${nodeId ==')"
        name="conditionExpression"
      >
        <template #label>
          <a-space>
            <span>流条件</span>
            <span v-if="form.feild" class="text-sm text-orange-400">{{ feildOptions[form.feild]?.message }}</span>
          </a-space>
        </template>
        <a-mentions
          v-if="form.conditionExpression"
          v-model:value="form.conditionExpression.conditionValue"
          autofocus
          :rows="2"
          :disabled="(form.conditionExpression?.conditionValue ?? '').includes('${nodeId ==')"
          :prefix="feildOptions[form.feild]?.prefix"
          :options="options"
          @select="onSelect"
        ></a-mentions>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup name="WorkflowForm">
import { ref, toRefs, onBeforeUnmount, unref, watch, computed } from 'vue'
import { feildList, feildOptions } from './conditionExpression'
const emit = defineEmits(['close'])
const props = defineProps({
  currentNode: {
    type: Object,
    default: () => {}
  },
  isModal: {
    type: Boolean,
    default: false
  }
})

const form = ref<any>({})
const { currentNode } = toRefs(props)

let id = currentNode.value.data.id

const options = computed(() => {
  if (form.value.feild) {
    return feildOptions[form.value.feild]?.options.filter((item) => {
      return item.value.includes(form.value.conditionExpression.conditionValue)
    })
  }
  return []
})
const onChange = () => {
  form.value.conditionExpression.conditionValue = ''
}
const onSelect = (option: { value: string }) => {
  form.value.conditionExpression.conditionValue = option.value
}

watch(
  () => props.currentNode.data.id,
  (val) => {
    if (props.currentNode.data.type === 'bpmn:sequenceFlow') {
      if (id) {
        emit('close', unref(form.value), id)
      }

      id = val
      form.value = currentNode.value.data.properties
      form.value.conditionExpression = form.value.conditionExpression ?? {
        liu: {}
      }
      form.value.conditionExpression['xsi:type'] = 'tFormalExpression'
    }
  },
  {
    immediate: true
  }
)

onBeforeUnmount(() => {
  form.value.conditionExpression['xsi:type'] = 'tFormalExpression'
  emit('close', form.value, id)
})
const close = () => {
  form.value.conditionExpression['xsi:type'] = 'tFormalExpression'
  emit('close', form.value, id)
}
defineExpose({
  close
})
</script>
<style lang="less">
.workflow-form {
  width: 350px;
}
</style>
